.amplify-message {
  align-items: var(--amplify-components-message-align-items);
  background-color: var(--amplify-components-message-background-color);
  color: var(--amplify-components-message-color);
  justify-content: var(--amplify-components-message-justify-content);
  padding-block: var(--amplify-components-message-padding-block);
  padding-inline: var(--amplify-components-message-padding-inline);
  border-color: var(--amplify-components-message-border-color);
  border-radius: var(--amplify-components-message-border-radius);
  border-style: var(--amplify-components-message-border-style);
  border-width: var(--amplify-components-message-border-width);
  line-height: var(--amplify-components-message-line-height);
  &--plain {
    background-color: var(--amplify-components-message-plain-background-color);
    border-color: var(--amplify-components-message-plain-border-color);
    color: var(--amplify-components-message-plain-color);
    &.amplify-message--info {
      background-color: var(
        --amplify-components-message-plain-info-background-color
      );
      border-color: var(--amplify-components-message-plain-info-border-color);
      color: var(--amplify-components-message-plain-info-color);
    }
    &.amplify-message--error {
      background-color: var(
        --amplify-components-message-plain-error-background-color
      );
      border-color: var(--amplify-components-message-plain-error-border-color);
      color: var(--amplify-components-message-plain-error-color);
    }
    &.amplify-message--warning {
      background-color: var(
        --amplify-components-message-plain-warning-background-color
      );
      border-color: var(
        --amplify-components-message-plain-warning-border-color
      );
      color: var(--amplify-components-message-plain-warning-color);
    }
    &.amplify-message--success {
      background-color: var(
        --amplify-components-message-plain-success-background-color
      );
      border-color: var(
        --amplify-components-message-plain-success-border-color
      );
      color: var(--amplify-components-message-plain-success-color);
    }
  }
  &--outlined {
    background-color: var(
      --amplify-components-message-outlined-background-color
    );
    border-color: var(--amplify-components-message-outlined-border-color);
    color: var(--amplify-components-message-outlined-color);
    &.amplify-message--info {
      background-color: var(
        --amplify-components-message-outlined-info-background-color
      );
      border-color: var(
        --amplify-components-message-outlined-info-border-color
      );
      color: var(--amplify-components-message-outlined-info-color);
    }
    &.amplify-message--error {
      background-color: var(
        --amplify-components-message-outlined-error-background-color
      );
      border-color: var(
        --amplify-components-message-outlined-error-border-color
      );
      color: var(--amplify-components-message-outlined-error-color);
    }
    &.amplify-message--warning {
      background-color: var(
        --amplify-components-message-outlined-warning-background-color
      );
      border-color: var(
        --amplify-components-message-outlined-warning-border-color
      );
      color: var(--amplify-components-message-outlined-warning-color);
    }
    &.amplify-message--success {
      background-color: var(
        --amplify-components-message-outlined-success-background-color
      );
      border-color: var(
        --amplify-components-message-outlined-success-border-color
      );
      color: var(--amplify-components-message-outlined-success-color);
    }
  }
  &--filled {
    background-color: var(--amplify-components-message-filled-background-color);
    border-color: var(--amplify-components-message-filled-border-color);
    color: var(--amplify-components-message-filled-color);
    &.amplify-message--info {
      background-color: var(
        --amplify-components-message-filled-info-background-color
      );
      border-color: var(--amplify-components-message-filled-info-border-color);
      color: var(--amplify-components-message-filled-info-color);
    }
    &.amplify-message--error {
      background-color: var(
        --amplify-components-message-filled-error-background-color
      );
      border-color: var(--amplify-components-message-filled-error-border-color);
      color: var(--amplify-components-message-filled-error-color);
    }
    &.amplify-message--warning {
      background-color: var(
        --amplify-components-message-filled-warning-background-color
      );
      border-color: var(
        --amplify-components-message-filled-warning-border-color
      );
      color: var(--amplify-components-message-filled-warning-color);
    }
    &.amplify-message--success {
      background-color: var(
        --amplify-components-message-filled-success-background-color
      );
      border-color: var(
        --amplify-components-message-filled-success-border-color
      );
      color: var(--amplify-components-message-filled-success-color);
    }
  }
}

.amplify-message__icon {
  font-size: var(--amplify-components-message-icon-size);
  & > * {
    display: block;
  }
}

.amplify-message__heading {
  font-weight: var(--amplify-components-message-heading-font-weight);
  font-size: var(--amplify-components-message-heading-font-size);
}

.amplify-message__content {
  flex: 1;
  flex-direction: column;
  gap: var(--amplify-space-xxxs);
}

.amplify-message__dismiss {
  margin-inline-start: auto;
  gap: var(--amplify-components-message-dismiss-gap);
}
